import * as React from 'react';
import {
    Text, View, StyleSheet, TouchableOpacity,FlatList,ActivityIndicator
} from 'react-native';
const dataArr = ['北京', '上海', '武汉', '南京', '郑州', '成都', '大连', '威海', '沈阳', '长春', '广州']
export default class Detail extends React.Component {
    onPressDetail(){
        this.props.navigator.pop()
    }

    constructor(props) {
        super(props);
        this.state ={
            isloading:false,
            dataArr:dataArr
        }
    }
    loadData(){
        this.setState({
            isloading:true
        })
        setTimeout(()=>{
            let dataArr = []
            for (let i = this.state.dataArr.length -1; i>=0 ; i--){
                dataArr.push(this.state.dataArr[i])
            }
            this.setState({
                dataArr:dataArr,
                isloading:false
            })
        },2000)
    }
    render() {
        return (
            <View>
                <TouchableOpacity onPress = {this.onPressDetail.bind(this)}>
                <Text style={{color:'#000'}}>Detail</Text>
                </TouchableOpacity>
                <FlatList
                    data={dataArr}
                    renderItem={({item}) => <View style = {styles.itemStyle}><Text>{item}</Text></View>}
                    refreshing = {this.state.isloading}
                    onRefresh = {() =>{
                        this.loadData()
                    }}
                    onEndReached = {() =>{
                        alert("111")
                        this.loadData()
                    }}
                    ItemSeparatorComponent = {
                        () =>{
                            return <View style = {{backgroundColor:"#C2C3C4",height:1}}/>
                        }
                    }
                    ListFooterComponent ={
                        () =>{
                            return <View>
                                <ActivityIndicator
                                size ={'large'}
                                color ={"#F00"}
                                animating = {true}
                                />
                                <Text>这里是尾部组件</Text>
                            </View>
                        }
                    }
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    itemStyle:{
        height: 70,
        alignItems:'center',
        justifyContent:'center'
    }
});

